<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>触发事件并传递参数</title>
        <style>
            .wrapper { border: 1px solid #00f ; }
            .amount { 
                display: inline-flex; 
                border: 1px solid #00f;
                margin: 5px;
                width: 150px;
                height: 50px;
                line-height: 50px;
                background-color: #00f;
            }
            .amount>a {
                flex-basis: 40px;
                color: #fff;
                font-size: 36px;
                text-align: center;
                user-select: none;
            }
            .amount>input {
                width: 70px;
                font-size: 36px;
                text-align: center;
                border: none;
                outline: none;
            }
        </style>
    </head>
    <div>

        <h3>触发事件并传递参数</h3>

        <div id="application" v-cloak></div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>

            const LoginForm = {
                template: `<form action="#" method="post">
                              <input type="text" v-model="email" placeholder="请输入登录邮箱">
                              <input type="password" v-model="password" placeholder="请输入登录密码">
                              <!--在v-on指令中使用.prevent修饰符阻止事件默认行为-->
                              <button type="submit" @click.prevent="submit">登录</button>
                           </form>`,
                data() {
                    return {
                        email: '',
                        password: ''
                    }
                },
                methods: {
                    submit(evt) {
                        console.log( 'event:', evt );
                        this.$emit('提交', { email: this.email, password: this.password } );
                    }
                },
                emits: {
                    '提交': ( {email, password} ) => {
                        if( email && password ) {
                            return true;
                        }
                        console.warn('Invalid submit event payload!')
                        return false;
                    }
                }
            }

            const App = {
                components: {
                    LoginForm
                },
                data() {
                    return {
                    }
                },
                template: `<div class="wrapper">
                              <LoginForm @提交="login"></LoginForm>
                           </div>`,
                methods: {
                    login( {email, password} ){
                        console.log( 'email:', email );
                        console.log( 'password:', password );
                    }
                }
            }
            
            const app = Vue.createApp(App);
            app.mount('#application');
        </script>
    </div>
</html>